<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/wow.min.js" ></script>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
			}
			/*非常重要的样式让背景图片100%适应整个屏幕*/
			
			.bg {
				display: table;
				width: 100%;
				height: 100%;
				padding: 100px 0;
				text-align: center;
				color: #fff;
				background: url(img/qqq.jpg) no-repeat bottom center;
				background-color: #000;
				background-size: cover;
				background-attachment: fixed;
			}
			.bg1 {
				display: table;
				width: 100%;
				height: 100%;
				padding: 100px 0;
				text-align: center;
				color: #fff;
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535515963881&di=63361733af52d6524c78ee8c94790a9c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Df9d8e6cc252eb938f86072b1bd0bef40%2F9a504fc2d562853548e2370c9aef76c6a7ef6399.jpg) no-repeat bottom center;
				background-color: #000;
				background-size: cover;
				background-attachment: fixed;
			}
			
			.my-navbar {
				padding: 20px 0;
				transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
			}
			
			.my-navbar a {
				background: transparent !important;
				color: #fff !important
			}
			
			.my-navbar a:hover {
				color: #45bcf9 !important;
				background: transparent;
				outline: 0
			}
			
			.my-navbar a {
				transition: color 0.5s ease-in-out;
			}
			/*-webkit-transition ;-moz-transition*/
			
			.top-nav {
				padding: 0;
				background: #000;
			}
			
			button.navbar-toggle {
				background-color: #fbfbfb;
			}
			/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
			
			button.navbar-toggle>span.icon-bar {
				background-color: #dedede
			}
			
			h1:nth-child(odd){
				color: limegreen;
			}
		</style>
	</head>

	<body>
		<nav class="navbar navbar-fixed-top my-navbar" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header" style="background: teal;max-width: 5%;overflow: hidden;max-height: 60px;">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
	                    <span class="sr-only">切换导航</span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                </button>
	                <img src="img/qqq.jpg"/>
					<a class="navbar-brand" href="#">菜鸟教程</a>
				</div>
				<div class="collapse navbar-collapse pull-right" id="example-navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#a">地球村</a>
						</li>
						<li>
							<a href="#b">神秘中国</a>
						</li>
						<li>
							<a href="#c">贵州风</a>
						</li>
						<li>
							<a href="#d">三都水族</a>
						</li>
						<li>
							<a href="#e">合表</a>
						</li>
						
					</ul>
				</div>
			</div>
		</nav>
		<div class="bg animated wow rollIn" id="a">
			<h1 class="animated wow zoomIn" data-wow-delay=".6s">地球村</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".7s">充满神奇的的过度</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".8s">有几千年的灿烂文化</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">世界上唯一没有中断的文明古国</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">爱好和平的人民</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".10s">勤劳勇敢的中华名族</h1>
		</div>
		<div class="bg animated wow rollIn" id="b">
			<h1 class="animated wow zoomIn" data-wow-delay=".6s">中国</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".7s">充满神奇的的过度</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".8s">有几千年的灿烂文化</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">世界上唯一没有中断的文明古国</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">爱好和平的人民</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".10s">勤劳勇敢的中华名族</h1>
		</div>
		<div class="bg animated wow rollIn" id="c">
			<h1 class="animated wow zoomIn" data-wow-delay=".6s">贵州</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".7s">位于中国的西南地区</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".8s">是西南地区的中交通枢纽</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">得天独厚的地理位置</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">冬无严寒夏无酷暑的</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".10s">适合人类游玩的地方</h1>
		</div>
		<!--<br /><br /><br /><br /><br /><br /><br />-->
		<p>
			<a href="www.xiandanke.com">闲蛋客</a>
		</p>
		<div class="bg1 animated wow fadeInUp" id="d">
			<h1 class="animated wow zoomIn">三都</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".1s">凤凰水乡</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".2s">全国唯一的水族自治县</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".5s">位于贵州的南部</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".7s">水族是中国56个名族中之一</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">有自己的语言和水书文字······</h1>
		</div>
		<div class="bg1 animated wow fadeInUp" id="e">
			<h1 class="animated wow zoomIn">合表</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".1s">美丽的自然风光，</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".2s">居住着古老的水家人</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".5s">独有的居住吊脚木楼，</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".7s">独具特色的水族文化，及热情好客的水族风情</h1>
			<h1 class="animated wow zoomIn" data-wow-delay=".9s">···········</h1>
		</div>
		<script>
			new WOW().init();
			$(window).scroll(function() {
				if($(".navbar").offset().top > 50) {
					$(".navbar-fixed-top").addClass("top-nav");
				} else {
					$(".navbar-fixed-top").removeClass("top-nav");
				}
			});
			//点击悬浮按钮的过度效果
		    $("#example-navbar-collapse >ul >li a").click(function() {
		        $("html, body").animate({
		            scrollTop: $($(this).attr("href")).offset().top - 20 + "px"
		        }, 500);
		        return false; //不要这句会有点卡顿
		    });
		</script>
	</body>

</html>